<template>
    <div style="border: 1px solid #ccc">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            :style="`height: ${editorHeight}px; overflow-y: hidden;`"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            @onChange="onChange"
        />
    </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { onBeforeUnmount, shallowRef } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { getImageUrl } from "@/utils/wish";
export default {
    components: { Editor, Toolbar },
    props: {
        height: {
            type: Number,
            default: 320
        },
        modelValue: {
            type: String,
            default: ``
        },
        fileMaxSize: {
            type: Number,
            default: 2
        }
    },
    setup (props, { emit }) {
        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef();
        const valueHtml = ref(props.modelValue);
        const editorHeight = ref(props.height);
        const editorFileSize = ref(props.fileMaxSize);
        const toolbarConfig = {
            excludeKeys: [
                'uploadVideo',
                'insertLink',
                'insertVideo',
                'code',
                'bgColor',
                'codeBlock',
                'bold',
                'italic',
                'sub',
                'sup',
            ]
        }
        const editorConfig = {
            placeholder: '请输入内容...',
            // 菜单配置
            MENU_CONF: {
                // 上传图片配置
                uploadImage: {
                    // 服务器地址
                    server: '/api/editor/upload/image',
                    // 表单文件名称
                    fieldName: 'editor-file',
                    // 上传的文件最大大小默认2M， 可自定义传入
                    maxFileSize: editorFileSize * 1024 * 1024,
                    // 最多可上传几个文件，默认为 100
                    maxNumberOfFiles: 2,
                    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                    allowedFileTypes: ['image/*'],
                    // 上传请求头
                    headers: {
                        'Authorization': localStorage.getItem('token')
                    },
                    // 超时时间，默认为 10 秒
                    timeout: 5 * 1000, // 5 秒
                    customInsert(res, insertFn) {
                        insertFn(getImageUrl(res.data.url), res.data.alt, '');
                        window.$notification.warning({
                            content: '提示',
                            meta: `图片不要占100%，不然显示会出现异常，请点击图片的角落进行缩放修改。`,
                            duration: 5000,
                        });
                    }
                },
            }
        }
        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        });
        const handleCreated = (editor) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }
        /**
         * 监听富文本数据变化
         * @param editor
         */
        const onChange = (editor) => {
            emit('update:modelValue', editor.getHtml());
        }
        return {
            editorRef,
            valueHtml,
            onChange,
            editorHeight,
            editorFileSize,
            mode: 'simple', // 或 'simple'、'default'
            toolbarConfig,
            editorConfig,
            handleCreated
        };
    }
}
</script>
<style lang="scss" scoped>
</style>
